<template>
  <section class="post_modal">
    <el-dialog :title="title"
               :visible.sync="postModal.show"
               width="30%"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :before-close="handleClose">
      <el-form ref="form"
               :model="form"
               label-width="100px">
        <el-form-item label="岗位名称"
                      prop="name"
                      :rules="[
      { required: true, message: '请填写岗位名称', trigger: 'blur' },
    ]">
          <el-input v-model="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注"
                      prop="remarks">
          <el-input v-model="form.remarks"
                    autocomplete="off"
                    type="textarea"
                    :rows="2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary"
                   :loading="sending"
                   @click="handleOk">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: "postModal",
  data () {
    return {
      sending: false,
      code: null,
      id: null,
      form: {
        name: "",
        remark: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      postModal: "postManage/postModal",
    }),
    title () {
      return this.postModal.obj ? "编辑岗位" : "新增岗位";
    }
  },
  watch: {
    ["postModal.obj"] (val) {
      if (val !== null) {
        let originForm = cloneDeep(val)
        let { name, remarks, code, id } = originForm

        this.$nextTick(() => {
          this.form = {
            name,
            remarks
          }
          this.code = code
          this.id = id
        })
      }
    }
  },
  methods: {
    ...mapActions({
      closeModal: "postManage/closeModal",
      submitPost: "postManage/submitPost",
      updatePost: "postManage/updatePost"

    }),
    handleClose () {
      this.code = null
      this.id = null
      this.closeModal();
      this.$refs.form.resetFields();
    },
    handleCancel () {
      this.handleClose();
    },
    handleOk () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.sending = true
          if (this.code && this.id) {
            this.updatePost({
              ...this.form,
              code: this.code,
              id: this.id
            }).then(res => {
              if (res && res.status) {
                this.handleClose();
                this.$message({
                  message: '更新成功',
                  type: 'success'
                });
              }
              // eslint-disable-next-line no-unused-vars
            }).finally(e => {
              this.sending = false
            })
          } else {
            this.submitPost(this.form).then(res => {
              if (res && res.status) {
                this.handleClose();
                this.$message({
                  message: '新建成功',
                  type: 'success'
                });
              }
              // eslint-disable-next-line no-unused-vars
            }).finally(e => {
              this.sending = false
            })
          }


        } else {
          // eslint-disable-next-line no-console
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
